<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>花名册</title>
    <link href="../../vendors/iview/css/iview.css" rel="stylesheet"/>
    <link href="../../styles/common.css" rel="stylesheet"/>
    <link href="../../styles/modalStyle.css" rel="stylesheet"/>
    <link href="../../styles/company.css" rel="stylesheet"/>
    <link href="../../styles/companyManageStyle.css" rel="stylesheet"/>
</head>
<body>
<!--员工管理内容自适应-->
<div class="company roster roster-head-fixed" id="app" v-cloak style="overflow: hidden;">
    <div class="company-box">
        <div class="company-one">
            <search-pannel></search-pannel>

        </div>
    </div>

    <div class="company-two">
        <!-- 表格内容-->
        <div class="c-center-box">
            <table-pannel></table-pannel>

        </div>
    </div>
</div>


<!--弹框遮罩 不可编辑员工资料-->
<div class="list-details-show" id="appMask" v-cloak>
    <!--信息弹框盒子-->
    <div class="message-box draggable">
        <!--切换-->
        <div class="addNewStaffBox clearfix">

            <div class="leftInfo">

                <div class="personal_img">


                    <div class="con4">
                        <canvas id="cvs" width="200" height="120"></canvas>
                        <span class="btn upload">上传个人头像</span>
                    </div>

                </div>
                <div class="Employee_information">
                    员工资料
                </div>

            </div>
            <div class="Employeeinformation Roster pr" style="margin-top: 0px">
                <div class="rightInfo-tab01">
                    <div class="close">
                        <a href="javascript:;" class="clickClose"></a>
                    </div>
                    <Tabs value="name2" :animated="false">
                        <Tab-pane label="员工资料" name="name1">

                            <div class="Sales_return_record">
                                <div class="Sales_return_insert_gai">
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>姓名</strong>
                                    </div>

                                    <div class="Not_editable">张三</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>档案号</strong>
                                    </div>
                                    <div class="Not_editable">001</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>手机号码</strong>
                                    </div>

                                    <div class="Not_editable">13812341234</div>
                                    <div class="Employee_form">
                                        <strong>账号状态</strong>
                                    </div>

                                    <div class="Not_editable">启用</div>
                                    <div class="Employee_form">
                                        <strong>密码</strong>
                                    </div>

                                    <div class="Not_editable_Password">不修改密码则为空</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>类型</strong>
                                    </div>
                                    <div class="Not_editable">试用期员工</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>部门</strong>
                                    </div>
                                    <div class="Not_editable">总经办</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>管理岗</strong>
                                    </div>
                                    <div class="Administration_gai">

                                        <!--<Radio v-model="disabledSingle" disabled>-->
                                        <!--<span>是</span>-->
                                        <!--</Radio>-->
                                        <!--<Radio label="Administration_no" disabled>-->
                                        <!--<span>否</span>-->
                                        <!--</Radio>-->


                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>职位</strong>
                                    </div>
                                    <div class="Not_editable">总经理</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>角色</strong>
                                    </div>
                                    <div class="Not_editable">总经办</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>职称等级</strong>
                                    </div>
                                    <div class="Not_editable">高级</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>技术等级</strong>
                                    </div>
                                    <div class="Not_editable">P10</div>

                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>薪资</strong>
                                    </div>
                                    <div class="Not_editable">8000</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>绩效薪资</strong>
                                    </div>
                                    <div class="Not_editable">8000</div>

                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>公积金(个人)</strong>
                                    </div>
                                    <div class="Not_editable">500</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>社保(公司)</strong>
                                    </div>
                                    <div class="Not_editable">1000</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>公积金(公司)</strong>
                                    </div>
                                    <div class="Not_editable">1000</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>社保(个人)</strong>
                                    </div>
                                    <div class="Not_editable">500</div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>父母津贴</strong>
                                    </div>
                                    <div class="Not_editable">1000</div>
                                    <div class="Employee_form">
                                        <strong>上班班次</strong>
                                    </div>
                                    <div class="Not_editable">销售部</div>


                                </div>

                            </div>


                        </Tab-pane>
                        <div class="huamingce">
                            <Tab-pane label="花名册" name="name2">


                                <div class="Sales_return_record">
                                    <div class="Sales_return_insert2">

                                        <div class="Employee_form01">
                                            <strong>入职时间</strong>
                                        </div>
                                        <div class="Not_editable">2017-07-04</div>
                                        <div class="Employee_form01">
                                            <strong>转正日期</strong>
                                        </div>
                                        <div class="Not_editable">2017-10-04</div>
                                        <div class="Employee_form01">

                                            <strong>性别</strong>
                                        </div>
                                        <div class="Not_editable">男</div>
                                        <div class="Employee_form01">
                                            <strong>生日日期</strong>
                                        </div>
                                        <div class="Not_editable">1988-01-01</div>
                                        <div class="Employee_form01">
                                            <strong>籍贯</strong>
                                        </div>
                                        <div class="Not_editable">海南</div>
                                        <div class="Employee_form01">
                                            <strong>户籍地址</strong>
                                        </div>
                                        <div class="Not_editable">海南</div>
                                        <div class="Employee_form01">
                                            <strong>身份证</strong>
                                        </div>
                                        <div class="Not_editable">460000000000000000</div>
                                        <div class="Employee_form01">
                                            <strong>过期日期</strong>
                                        </div>
                                        <div class="Not_editable">2020-05-05</div>
                                        <div class="Employee_form01">
                                            <strong>文化程度</strong>
                                        </div>
                                        <div class="Not_editable">本科</div>
                                        <div class="Employee_form01">
                                            <strong>专业</strong>
                                        </div>
                                        <div class="Not_editable">设计</div>
                                        <div class="Employee_form01">
                                            <strong>银行开户行</strong>
                                        </div>
                                        <div class="Not_editable">海南省海口支行</div>
                                        <div class="Employee_form01">
                                            <strong>银行卡</strong>
                                        </div>
                                        <div class="Not_editable">8888888888888</div>
                                        <div class="Employee_form01">
                                            <strong>备注</strong>
                                        </div>
                                        <div class="Not_editable_long">海南省海口支行打算大三大四的</div>

                                        <div class="Employee_form02">
                                            <strong>合同开始时间</strong>
                                        </div>
                                        <div class="Employee_form02">
                                            <strong>合同结束时间</strong>
                                        </div>
                                        <div class="Employee_form03" style="border-right: none">
                                            <strong>续签</strong>
                                        </div>
                                        <div class="Employee_form03"
                                             style="border-right: 1px solid #EAEEEF;">
                                            <strong>操作</strong>
                                        </div>
                                        <div class="Inductiontime02">2017-01-15</div>
                                        <div class="Inductiontime02">2020-01-15</div>
                                        <div class="Employee_form04">

                                            <!--<Checkbox v-model="disabledSingle" disabled></Checkbox>-->
                                        </div>
                                        <div class="Employee_form04">
                                            <div class="Employee_form04_img01">

                                            </div>
                                            <div class="Employee_form04_img02">

                                            </div>


                                        </div>


                                    </div>


                                </div>

                            </Tab-pane>

                        </div>

                    </Tabs>

                </div>

            </div>

        </div>
        <div class="details-but">
            <div class="details-but-left"></div>
            <a href="#" class="shuaxin"></a>

            <div class="details-but-right"></div>
        </div>

    </div>

    <div class="zhezhao"></div>
</div>

<!--弹框遮罩 可编辑员工资料-->
<div class="list-details" id="appMaskEdit" v-cloak>
    <!--信息弹框盒子-->
    <div class="message-box draggable">
        <!--切换-->
        <div class="addNewStaffBox clearfix">

            <div class="leftInfo">

                <div class="personal_img">


                    <div class="con4">
                        <canvas id="cvs" width="200" height="120"></canvas>
                        <span class="btn upload">上传个人头像<input type="file" class="upload_pic"
                                                              id="upload"/></span>

                    </div>

                </div>
                <div class="Employee_information">
                    <i-Select v-model="fromModal" size="small" placeholder="所属公司">
                        <i-Option v-for="item in staffFromList" :value="item.value" :key="item">{{
                            item.label }}
                        </i-Option>
                    </i-Select>

                </div>


                <div class="leftStaffInfo-footer">
                    <Button type="primary" @click="modifyaccountpassword = true">修改账户密码</Button>
                    <Modal
                            title="修改账户密码"
                            v-model="modifyaccountpassword"
                            width="360"
                            :mask-closable="false"
                            ok-text="保存修改"
                            cancel-text="忘记密码"
                            class-name="password-one vertical-center-modal">
                        <div class="password-ul">
                            <div class="password-new">
                                <div class="newpassword"><span>原密码</span></div>
                                <input type="text">
                            </div>
                            <div class="password-old">
                                <div class="oldpassword"><span>新密码</span></div>
                                <input type="text">
                            </div>
                            <div class="password-confirm">
                                <div class="confirmnewpassword"><span>确认新密码</span></div>
                                <input type="text">
                            </div>
                        </div>
                        <div class="wjmmbox">
                            <dd type="primary" @click="wangjimima = true">忘记密码</dd>
                            <Modal
                                    title="忘记密码"
                                    v-model="wangjimima"
                                    width="360"
                                    :mask-closable="false"
                                    ok-text="保存"
                                    cancel-text="取消"
                                    class-name="vertical-center-modal password-tow">
                                <div class="password-ul">
                                    <div class="password-newone">
                                        <div class="newpassword"><span>手机号</span></div>
                                        <input type="text">
                                    </div>
                                    <div class="password-old">
                                        <div class="oldpassword"><span>验证码</span></div>
                                        <input type="text">
                                    </div>
                                    <div class="password-confirm">
                                        <div class="confirmnewpassword"><span>输入新密码</span></div>
                                        <input type="text">
                                    </div>
                                </div>
                                <div class="hqyzm">
                                    <p>获取验证码</p>
                                </div>

                            </Modal>
                        </div>
                    </Modal>

                </div>
                <div class="Bind_Mobile">
                    <Button type="primary" @click="bindmobile = true">绑定手机</Button>
                    <Modal
                            title="绑定手机"
                            v-model="bindmobile"
                            width="360"
                            :mask-closable="false"
                            ok-text="保存"
                            cancel-text="取消"
                            class-name="vertical-center-modal password-one password-there">
                        <div class="password-ul">
                            <div class="password-newone">
                                <div class="newpassword"><span>手机号</span></div>
                                <input type="text">
                            </div>
                            <div class="password-confirm">
                                <div class="confirmnewpassword"><span>验证码</span></div>
                                <input type="text">
                            </div>

                            <div class="hqyzm">
                                <p>获取验证码</p>
                            </div>
                        </div>

                    </Modal>
                </div>
                <div class="Bind_WeChat">
                    <Button type="primary" @click="bindwechat = true">绑定微信</Button>
                    <Modal
                            title="绑定微信"
                            v-model="bindwechat"
                            width="360"
                            :mask-closable="false"
                            ok-text=""
                            cancel-text=""
                            class-name="vertical-center-modal password-one password-four">
                        <div slot="footer">
                        </div>
                        <div class="bindwechat-ul">
                            <div class="bdwx-ewm"></div>
                            <p>使用微信扫描二维码绑定微信</p>
                        </div>

                    </Modal>
                </div>
            </div>
            <div class="Employeeinformation Roster" style="margin-top: 0px">
                <div class="rightInfo-tab01">
                    <div class="close">
                        <a href="javascript:;" class="clickClose" @click="handleCancel"></a>
                    </div>
                    <Tabs value="name2" :animated="false">
                        <Tab-pane label="员工资料" name="name1">

                            <div class="Sales_return_record">
                                <div class="Sales_return_insert">
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>姓名0</strong>
                                    </div>
                                    <input type="text">
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>档案号</strong>
                                    </div>
                                    <Input-number v-model="value6"
                                                  :disabled="disabled" style="width: 33.338%;" class="border-right"></Input-number>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>手机号码</strong>
                                    </div>
                                    <input type="text">
                                    <div class="Employee_form">
                                        <strong>账号状态</strong>
                                    </div>

                                    <i-Select class="border-right" v-model="Accountstatus" style="width: 33.338%;"
                                              placeholder="">
                                        <i-Option v-for="item in Accountstatus2" :value="item.value"
                                                  :key="item">{{ item.label }}
                                        </i-Option>
                                    </i-Select>
                                    <div class="Employee_form">
                                        <strong>密码</strong>
                                    </div>
                                    <input type="text" placeholder="不修改密码则为空">
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>类型</strong>
                                    </div>
                                    <i-Select class="border-right" v-model="type01" style="width: 33.338%;" placeholder="">
                                        <i-Option v-for="item in type02" :value="item.value"
                                                  :key="item">{{ item.label }}
                                        </i-Option>
                                    </i-Select>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>部门</strong>
                                    </div>
                                    <div style="width: 33%;overflow: hidden;float:left;">
                                        <i-Select v-model="department01"
                                                  placeholder="">
                                            <i-Option v-for="item in department02"
                                                      :value="item.value" :key="item">{{ item.label
                                                }}
                                            </i-Option>
                                        </i-Select>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>管理岗</strong>
                                    </div>
                                    <div class="Administration">
                                        <Radio-group class="border-right" v-model="vertical" vertical>
                                            <Radio label="Administration_yes">
                                                <span>是</span>
                                            </Radio>
                                            <Radio label="Administration_no">
                                                <span>否</span>
                                            </Radio>

                                        </Radio-group>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>职位</strong>
                                    </div>
                                    <div style="float:left;width: 33%;">
                                        <i-Select v-model="position01" style="width:100%"
                                                  placeholder="">
                                            <i-Option v-for="item in position02" :value="item.value"
                                                      :key="item">{{ item.label }}
                                            </i-Option>
                                        </i-Select>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>角色</strong>
                                    </div>
                                    <i-Select class="border-right" v-model="role01" style="width: 33.338%;" placeholder="">
                                        <i-Option v-for="item in role02" :value="item.value"
                                                  :key="item">{{ item.label }}
                                        </i-Option>
                                    </i-Select>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>职称等级</strong>
                                    </div>
                                    <div style="float:left;width: 33%;">
                                        <i-Select v-model="TitleLevel01" style="width:100%"
                                                  placeholder="">
                                            <i-Option v-for="item in TitleLevel02"
                                                      :value="item.value" :key="item">{{ item.label
                                                }}
                                            </i-Option>
                                        </i-Select>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>技术等级</strong>
                                    </div>
                                    <div style="float:left;width: 33.338%;">
                                        <i-Select class="border-right"  v-model="Technicallevel01" style="width:100%"
                                                  placeholder="">
                                            <i-Option v-for="item in Technicallevel02"
                                                      :value="item.value" :key="item">{{ item.label
                                                }}
                                            </i-Option>
                                        </i-Select>
                                    </div>

                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>薪资</strong>
                                    </div>
                                    <div class="inputNum">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value1" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>绩效薪资</strong>
                                    </div>
                                    <div class="inputNum border-right" style="width: 33.338%;">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value2" :step="100"></Input-number>
                                    </div>

                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>公积金(个人)</strong>
                                    </div>
                                    <div class="inputNum">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value3" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>社保(公司)</strong>
                                    </div>
                                    <div class="inputNum border-right" style="width: 33.338%;">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value4" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>公积金(公司)</strong>
                                    </div>
                                    <div class="inputNum">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value5" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>社保(个人)</strong>
                                    </div>
                                    <div class="inputNum border-right" style="width: 33.338%;">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value6" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form">
                                        <i class="mustStars"></i>
                                        <strong>父母津贴</strong>
                                    </div>
                                    <div class="inputNum">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value7" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form">
                                        <strong>餐补</strong>
                                    </div>
                                    <div class="inputNum border-right" style="width: 33.338%;">
                                        <Input-number :max="90000000" :min="-1000000"
                                                      v-model="value8" :step="100"></Input-number>
                                    </div>
                                    <div class="Employee_form" style="border-bottom: 1px solid #EAEEEF;height: 29px;">
                                        <i class="mustStars"></i>
                                        <strong>上班班次</strong>
                                    </div>
                                    <div class="workWidth">
                                        <i-Select v-model="Dutyshift01" placeholder="">
                                            <i-Option v-for="item in Dutyshift02"
                                                      :value="item.value" :key="item">{{ item.label
                                                }}
                                            </i-Option>
                                        </i-Select>
                                    </div>


                                </div>

                            </div>


                        </Tab-pane>
                        <!--皮-->
                        <div class="huamingce">
                            <Tab-pane label="花名册" name="name2">


                                <div class="Sales_return_record">
                                    <div class="Sales_return_insert2">

                                        <div class="Employee_form01">
                                            <strong>入职时间</strong>
                                        </div>
                                        <div class="Inductiontime border-none" style="float:left;width: 33%;">
                                            <Row>
                                                <Col span="12">
                                                <Date-picker type="date" placeholder="" v-model="entryDate" format="yyyy-MM-dd"
                                                             placement="bottom-end"></Date-picker>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div class="Employee_form01">
                                            <strong>转正日期</strong>
                                        </div>
                                        <div class="Inductiontime" style="float:left;width: 33.338%;">
                                            <Row>
                                                <Col span="12">
                                                <Date-picker type="date" placeholder="" v-model="regularDate" format="yyyy-MM-dd"
                                                              placement="bottom-end"></Date-picker>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div class="Employee_form01">

                                            <strong>性别</strong>
                                        </div>
                                        <i-Select v-model="sexValue"
                                                  style="width: 33%; float:left;" placeholder="">
                                            <i-Option v-for="item in sex" :value="item.value"
                                                      :key="item">{{ item.label }}
                                            </i-Option>
                                        </i-Select>
                                        <div class="Employee_form01">
                                            <strong>生日日期</strong>
                                        </div>
                                        <div class="Inductiontime" style="float:left;width: 33.338%;">
                                            <Row>
                                                <Col span="12">
                                                <Date-picker type="date" placeholder="" v-model="birthDate" format="yyyy-MM-dd"
                                                              placement="bottom-end"></Date-picker>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div class="Employee_form01">
                                            <strong>籍贯</strong>
                                        </div>
                                        <input type="text" v-model="from">
                                        <div class="Employee_form01">
                                            <strong>户籍地址</strong>
                                        </div>
                                        <input type="text" v-model="fromAddress" style="border-right: 1px solid #EAEEEF;width: 33.338%;">
                                        <div class="Employee_form01">
                                            <strong>身份证</strong>
                                        </div>
                                        <input type="text" v-model="idCard">
                                        <div class="Employee_form01">
                                            <strong>过期日期</strong>
                                        </div>
                                        <div class="Inductiontime" style="float:left;width: 33.338%;">
                                            <Row>
                                                <Col span="12">
                                                <Date-picker type="date" placeholder="" format="yyyy-MM-dd"
                                                             placement="bottom-end"></Date-picker>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div class="Employee_form01">
                                            <strong>文化程度</strong>
                                        </div>
                                        <input type="text" v-model="education">
                                        <div class="Employee_form01">
                                            <strong>专业</strong>
                                        </div>
                                        <input type="text" v-model="profession" style="border-right: 1px solid #EAEEEF;width: 33.338%;">
                                        <div class="Employee_form01">
                                            <strong>银行开户行</strong>
                                        </div>
                                        <input type="text" v-model="bankType">
                                        <div class="Employee_form01">
                                            <strong>银行卡号</strong>
                                        </div>
                                        <input type="text" v-model="bankNum" style="border-right: 1px solid #EAEEEF;width: 33.338%;">
                                        <div class="Employee_form01" style="border-bottom: 1px solid #EAEEEF;">
                                            <strong>备注</strong>
                                        </div>
                                        <input type="text" class="inputLong" v-model="remarks">

                                        <div class="Employee_form02">
                                            <strong>合同开始时间</strong>
                                        </div>
                                        <div class="Employee_form02">
                                            <strong>合同结束时间</strong>
                                        </div>
                                        <div class="Employee_form03" style="border-right: none">
                                            <strong>续签</strong>
                                        </div>
                                        <div class="Employee_form03"
                                             style="border-right: 1px solid #EAEEEF;">
                                            <strong>操作</strong>
                                        </div>
                                        <div class="Inductiontime01 time-s-e">
                                            <Row>
                                                <Col span="12">
                                                <Date-picker type="date" placeholder="" v-model="contractStartDate" format="yyyy-MM-dd"
                                                              placement="bottom-end"></Date-picker>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div class="Inductiontime01 time-s-e">
                                            <Row>
                                                <Col span="12">
                                                <Date-picker type="date" placeholder="" v-model="contractEndDate" format="yyyy-MM-dd"
                                                              placement="bottom-end"></Date-picker>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div class="Employee_form04" style="border-right: none">
                                            <Checkbox label=""></Checkbox>
                                        </div>
                                        <div class="Employee_form04">
                                            <div class="Employee_form04_img01">

                                            </div>
                                            <div class="Employee_form04_img02">

                                            </div>
                                        </div>


                                    </div>


                                </div>

                            </Tab-pane>

                        </div>

                    </Tabs>

                    <!-- 底部按钮-->
                    <div class="staffBtn">
                        <button class="s-cancel" @click="handleCancel"><i></i>取消</button>
                        <button class="s-save" @click="handleSave"><i></i>保存</button>
                    </div>

                </div>

            </div>

        </div>
        <div class="details-but">
            <div class="details-but-left"></div>
            <a href="#" class="shuaxin"></a>

            <div class="details-but-right"></div>
        </div>

    </div>

    <div class="zhezhao" @click="handleCancel"></div>
</div>

<!--组件 搜索框-->
<script type="text/x-template" id="search-pannel-template" v-cloak>
    <div class="concluded-top-two">
        <div class="one-input">
            <strong>部门：</strong>
            <strong class="state-input">
                <i-select v-model="secModel" placeholder="">
                    <i-option v-for="item in secList " :value="item.value" :key="item">{{ item.label
                        }}
                    </i-option>
                </i-select>
            </strong>
        </div>
        <div class="one-input">
            <strong>职位：</strong>
            <strong class="state-input">
                <i-select v-model="postModel" placeholder="">
                    <i-option v-for="item in postList " :value="item.value" :key="item">{{
                        item.label }}
                    </i-option>
                </i-select>
            </strong>
        </div>
        <div class="one-input">
            <strong>权限：</strong>
            <strong class="state-input">
                <i-select v-model="limitModel" placeholder="">
                    <i-option v-for="item in limitList " :value="item.value" :key="item">{{
                        item.label }}
                    </i-option>
                </i-select>
            </strong>
        </div>


        <div class="c-search-box"><span>关键字：</span><input type="text" class="c-input" v-model="searchModel"
                                                          placeholder="输入手机、姓名、客户来源">
            <input type="button" class="c-search" value="搜索" @click="getSearchData">
        </div>
    </div>
</script>

<!--组件 表格内容-->
<script type="text/x-template" id="table-pannel-template" v-cloak>

    <div style="height: 100%">
        <div class="c-two-top">
            <dl>
                <dd type="primary" @click="" class="exportReport"><i></i>人力资源报表</dd>

                <dd type="primary" size="large" @click="exportData" class="export"><i></i>导出Excel
                </dd>

            </dl>

            <div class="sexNumber">男：{{maleNumber}}人； 女：{{femaleNumber}}人； 总共：{{staffTableData.length}}人</div>

            <div class="c-sort">
                <strong class="state-input">
                    <i-select v-model="defaultSort" placeholder="默认排序">
                        <i-option v-for="item in sort" :value="item.value" :key="item">{{ item.label
                            }}
                        </i-option>
                    </i-select>
                </strong>
            </div>
        </div>
        <div class="c-two-center roster-layout">
            <i-table :columns="columnsHead" :data="staffTableData" size="small"
                     ref="table"></i-table>
        </div>
        <!-- 分页-->
        <paging ref="paging"  current-page="1"></paging>

        <!--删除职位弹框-->
        <Modal
                title="删除职位"
                v-model="deletePos"
                width="360"
                :mask-closable="false"
                class-name="vertical-center-modal deleteWrap"
                ok-text="确认"
                @on-ok="handleSuccessDel">
            <div class="delete-position">
                <ul class="delete-ul">
                    <h3 class="warning">确认将该职位删除吗？</h3>
                </ul>
            </div>
        </Modal>
    </div>

</script>


<script src="../../vendors/vue/vue.js"></script>
<script src="../../vendors/iview/js/iview.js"></script>
<script src="../../vendors/jquery.js"></script>

<!--分页-->
<script src="../../data/Paging.js"></script>

<!--组件数据-->
<script src="../../data/roster3.js"></script>


<!--弹框实例-->
<script>

    //不可编辑弹框实例
    var appMask = new Vue({
        el: '#appMask',
        data: {},

    });
    //可编辑弹框实例
    var appMaskEdit = new Vue({
        el: '#appMaskEdit',
        created: function () {
            var that = this
            bus.$on('user-info', function (obj) {
                that.userInfo = obj
                that.entryDate = that.userInfo.entryDate
                that.regularDate = that.userInfo.regularDate
                that.sexValue = that.userInfo.sex
                that.birthDate = that.userInfo.birthDate
                that.from = that.userInfo.from
                that.fromAddress = that.userInfo.from
                that.idCard = that.userInfo.idCard
                that.profession = that.userInfo.profession
                that.education = that.userInfo.education
                that.bankType = that.userInfo.bankType
                that.bankNum = that.userInfo.bankNum
                that.remarks = that.userInfo.remarks
                that.contractStartDate = that.userInfo.contractStartDate
                that.contractEndDate = that.userInfo.contractEndDate
            })
        },
        data: function (){
            return {
                wangjimima: false,
                modifyaccountpassword: false,
                bindmobile: false,
                bindwechat: false,
                userInfo:{},
                //添加新员工内容
                /*员工资料*/
                staffFromList: [
                    {
                        value: '员工资料',
                        label: '员工资料'
                    },
                    {
                        value: '所属公司',
                        label: '所属公司'
                    },

                ],
                entryDate:'', // 入职时间
                regularDate:'', // 转正日期
                birthDate:'', // 生日日期
                from:'', // 籍贯
                fromAddress:'', // 籍贯地址
                idCard:'', // 身份证
                profession:"",// 专业
                education:'', // 教育程度
                bankType:'',// 银行类型
                bankNum:'',// 银行卡号
                remarks:'',// 备注
                contractStartDate:'', // 合同开始时间
                contractEndDate:'', // 合同结束时间
                fromModal: '',
                /*档案号*/
                disabled: true,
                value6: 001,

                /*账号状态*/
                Accountstatus2: [
                    {
                        value: 'qiyong',
                        label: '启用'
                    },
                    {
                        value: 'buqiyong',
                        label: '不启用'
                    },

                ],
                Accountstatus: '',

                /*类型*/
                type02: [
                    {
                        value: 'shiyonqi',
                        label: '试用期员工'
                    },
                    {
                        value: 'zhuanzhengyuangon',
                        label: '转正员工'
                    },

                ],
                type01: '',

                /*部门*/
                department02: [
                    {
                        value: 'jishubu',
                        label: '技术部'
                    },
                    {
                        value: 'zhuanzhengyuangon',
                        label: '转正员工'
                    },

                ],
                department01: '',

                /*管理岗*/
                vertical: '',

                /*职位*/
                position02: [
                    {
                        value: 'zongjban',
                        label: '总经办'
                    },
                    {
                        value: 'zhuanzhengyuangon',
                        label: '转正员工'
                    },

                ],
                position01: '',

                /*角色*/
                role02: [
                    {
                        value: 'zongjban',
                        label: '总经办'
                    },
                    {
                        value: 'zhuanzhengyuangon',
                        label: '转正员工'
                    },

                ],
                role01: '',

                /*职称等级*/
                TitleLevel02: [
                    {
                        value: 'gaoji',
                        label: '高级'
                    },
                    {
                        value: 'zhongji',
                        label: '中级'
                    },

                ],
                TitleLevel01: '',

                /*技术等级*/
                Technicallevel02: [
                    {
                        value: 'gaoji',
                        label: '高级'
                    },
                    {
                        value: 'zhongji',
                        label: '中级'
                    },

                ],
                Technicallevel01: '',

                /*薪资*/
                value1: 0,

                /*绩效薪资*/
                value2: 0,

                /*公积金(个人)*/
                value3: 0,

                /*社保(公司)*/
                value4: 0,

                /*公积金(公司)*/
                value5: 0,

                /*社保(个人)*/
                value6: 0,

                /*父母津贴*/
                value7: 0,

                /*餐补*/
                value8: 0,

                /*上班班次*/
                Dutyshift02: [
                    {
                        value: 'xiaoshoubu',
                        label: '销售部'
                    },
                    {
                        value: 'zhongji',
                        label: '400'
                    },

                ],
                Dutyshift01: '',

                /*性别*/
                sex: [
                    {
                        value: '1',
                        label: '男'
                    },
                    {
                        value: '0',
                        label: '女'
                    },

                ],
                sexValue: '',
            }
        },
        methods: {
            getDate: function (date) {
                var d = new Date(date);
                return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()

            },
            handleCancel: function () {

                $(".list-details").css({display: 'none'});
                $(".zhezhao").css({display: 'none'});
                console.log("取消")
            },
            handleSave: function () {
                this.userInfo.entryDate = this.getDate(this.entryDate.toString())
                this.userInfo.regularDate = this.getDate(this.regularDate.toString())
                this.userInfo.sex = this.sexValue
                this.userInfo.birthDate = this.getDate(this.birthDate.toString())
                this.userInfo.from = this.from
                this.userInfo.from = this.fromAddress
                this.userInfo.idCard = this.idCard
                this.userInfo.profession = this.profession
                this.userInfo.education = this.education
                this.userInfo.bankType = this.bankType
                this.userInfo.bankNum = this.bankNum
                this.userInfo.remarks = this.remarks
                this.userInfo.contractStartDate = this.getDate(this.contractStartDate.toString())
                this.userInfo.contractEndDate = this.getDate(this.contractEndDate.toString())
                $.ajax({
                    type: 'post',
                    url: '../data/common/mock_post_ok.json',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(this.userInfo),
                    dataType: "json"
                }).done(function (res) {

                })
                console.log(this.userInfo)
            }
        }
    })
</script>


<!--自定义js-->
<script>
    $(function () {

        //不可编辑弹框
        $(".staffModel").click(function () {
            $(".list-details-show").css({display: 'block'});
            $(".zhezhao").css({display: 'block'});

        });
        $(".showStaff").click(function () {
            $(".list-details-show").css({display: 'block'});
            $(".zhezhao").css({display: 'block'});
        });
        $(".close .clickClose").click(function () {
            $(".list-details-show").css({display: 'none'});
            $(".zhezhao").css({display: 'none'});
        })


        //操作按钮点击样式控制
        $(".editStaff").click(function () {
            $(this).addClass("on");
        });

        $("body").click(function () {
            $(".editStaff").removeClass("on");
        })
        $(".cancelStaff").click(function () {
            $(this).addClass("on");
        })
        $("body").click(function () {
            $(".cancelStaff").removeClass("on");
        })
    })


</script>

<!--上传头像-->
<script>
    //获取上传按钮
    var input1 = document.getElementById("upload");

    if (typeof FileReader === 'undefined') {
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input1.setAttribute('disabled', 'disabled');
    } else {
        input1.addEventListener('change', readFile, false);
        /*input1.addEventListener('change',function (e){
         console.log(this.files);//上传的文件列表
         },false); */
    }

    function readFile() {
        var file = this.files[0];//获取上传文件列表中第一个文件
        if (!/image\/\w+/.test(file.type)) {
            //图片文件的type值为image/png或image/jpg
            alert("文件必须为图片！");
            return false;
        }
        // console.log(file);
        var reader = new FileReader();//实例一个文件对象
        reader.readAsDataURL(file);//把上传的文件转换成url
        //当文件读取成功便可以调取上传的接口
        reader.onload = function (e) {
            // console.log(this.result);//文件路径
            // console.log(e.target.result);//文件路径
            /*var data = e.target.result.split(',');
             var tp = (file.type == 'image/png')? 'png': 'jpg';
             var imgUrl = data[1];//图片的url，去掉(data:image/png;base64,)
             //需要上传到服务器的在这里可以进行ajax请求
             // console.log(imgUrl);
             // 创建一个 Image 对象
             var image = new Image();
             // 创建一个 Image 对象
             // image.src = imgUrl;
             image.src = e.target.result;
             image.onload = function(){
             document.body.appendChild(image);
             }*/

            var image = new Image();
            // 设置src属性
            image.src = e.target.result;
            var max = 200;
            // 绑定load事件处理器，加载完成后执行，避免同步问题
            image.onload = function () {
                // 获取 canvas DOM 对象
                var canvas = document.getElementById("cvs");
                // 如果高度超标 宽度等比例缩放 *=
                /*if(image.height > max) {
                 image.width *= max / image.height;
                 image.height = max;
                 } */
                // 获取 canvas的 2d 环境对象,
                var ctx = canvas.getContext("2d");
                // canvas清屏
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 重置canvas宽高
                /*canvas.width = image.width;
                 canvas.height = image.height;
                 if (canvas.width>max) {canvas.width = max;}*/
                // 将图像绘制到canvas上
                // ctx.drawImage(image, 0, 0, image.width, image.height);
                ctx.drawImage(image, 0, 0, 200, 120);
                // 注意，此时image没有加入到dom之中


            };
        }
    };
</script>
</body>
</html>
